<template>
    <div class="pb">
        <div class="b1" v-for="(v, index) in arr" :key="index">
            <img :src="v.imgurl" alt="">
            <p>{{ v.name }}</p>
            <span>￥{{ v.Pice }}</span>

        </div>


    </div>
</template>

<script>
import axios from "axios"
let service = axios.create()
export default {
    data() {
        return {
            arr: [],
            obj: {},
        }
    },
    mounted() {
        service({
            url: "http://118.178.238.19:3001/api/pro/search",
            method: "get",
            params: {
                limitNum: 40,
                count:2
            }
        }).then(res => {
            res.data.data.forEach(element => {
                this.obj = { imgurl: element.img3, name: element.proname, Pice: element.originprice, }
                this.arr.push(this.obj)
               
            });
        })
    }
}
</script>

<style scoped>
.pb {
    width: 98%;
    margin: auto;
    column-count: 3;
    margin-bottom: 3.75rem;
    /* margin-top: 5px; */
    column-gap: .3125rem;
    position: relative;
    background-color: #FA4820;
    /* display: flex; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    
}

.pb .b1 {
    margin-left: 10px;
    width: 90%;
    background-color: white;
    margin-bottom: .625rem;
    border-radius: .9375rem;
    break-inside: avoid;
    text-align: center;

}

.b1 img {
    width: 90%;
    height: 40%;
    /* margin: auto; */

}

p {
    font-size: .625rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;


}

span {
    margin-left: .1875rem;
    color: red;
    font-weight: bold;
}
</style>